<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes.tld"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome to ISERN</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noarchive" />
<meta name="keywords" content=" keywords here - SOME search engines still use them - and all search links count " />
<meta name="description" content="Short description - often used by search engines as real description" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      
<script type="text/javascript">
var ids=new Array('addOrg','addRes','addCol','colName','orgName','resName','errorTable','successful','nameError','editTableR','addMOrg','addMCol','addMRes');


function setTable(what){
  for (var i=0;i<ids.length;i++){
	document.getElementById(ids[i]).style.display="none";
	clearForm(ids[i]);
  }
  
  if(what == 'addOrg') {
    document.getElementById('editTableR').style.display="none";
    document.getElementById('addMOrg').style.display="block"; 
  }
  else if(what == 'addCol') {
    document.getElementById('addMCol').style.display="block";
    document.getElementById('editTableR').style.display="none"; 
  }
  else if(what == 'addRes') {
    document.getElementById('editTableR').style.display="none";
    document.getElementById('addMRes').style.display="block";
  }
  else {
  	document.getElementById('messageTable').style.display="none";
  	document.getElementById('messageTableO').style.display="none";
  	
  	document.getElementById('errorTable').style.display="none";
  	document.getElementById('editTableR').style.display="none";
  }
  
  if(document.getElementById(what).style.display=="none"){
    document.getElementById(what).style.display="block";
  }
  else if(document.getElementById(what).style.display=="block"){
    document.getElementById(what).style.display="none";
  }
}

function clearForm(formIdent) 
{ 
  var form, elements, i, elm; 
  form = document.getElementById 
    ? document.getElementById(formIdent) 
    : document.forms[formIdent]; 

	if (document.getElementsByTagName)
	{
		elements = form.getElementsByTagName('input');
		for( i=0, elm; elm=elements.item(i++); )
		{
			if (elm.getAttribute('type') == "text")
			{
				elm.value = '';
			}
		}
	}

	// Actually looking through more elements here
	// but the result is the same.
	else
	{
		elements = form.elements;
		for( i=0, elm; elm=elements[i++]; )
		{
			if (elm.type == "text")
			{
				elm.value ='';
			}
		}
	}
}

</script>
</head>
<body>

<div id="banner">
<p align="center">
<h1 id="fly" align="center">
Welcome ISERN 1.3</h1>
</p>
</div>

<div id="leftcontent">
<p align="center">
<br />
<a href="mainPage.jsp">
HOME
</a>
<br />
<br />
ADD / EDIT<br />
<br />
<a href="#" onclick="setTable('colName');return false">
Collaboration</a>
<br />
<br />
<a href="#" onclick="setTable('orgName');return false">
Organization</a>
<br />
<br />
<a href="#" onclick="setTable('resName');return false">
Researcher</a>
<br />
<br />
LIST
<br />
<br />
<stripes:link href="/MyIsern.action" event="displayCollaborations">
Collaboration
</stripes:link>
<br />
<br />
<stripes:link href="/MyIsern.action" event="displayOrganizations">
Organization
</stripes:link>
<br />
<br />

<stripes:link href="/MyIsern.action" event="displayResearchers">
Researcher
</stripes:link>
<br />
<br />
MORE
<br />
<br />
<stripes:link href="/MyIsern.action" event="sanityCheckReport">
Sanity Report</stripes:link>
<br />
<br />
</p>
</div>

<div id="centercontent">
<script type="text/javascript">

message = document.getElementById("fly").innerHTML; 
distance = 200; // pixel(s)
speed = 200; // milliseconds

var txt="",
	num=0,
	num4=0,
	flyofle="",
	flyofwi="",
	flyofto="",
	fly=document.getElementById("fly");


function stfly() {
	for(i=0;i != message.length;i++) {
		if(message.charAt(i) != "$")
			txt += "<span style='position:relative;visibility:hidden;' id='n"+i+"'>"+message.charAt(i)+"<\/span>";
		else
			txt += "<br>";
	}
	fly.innerHTML = txt;
	txt = "";
	flyofle = fly.offsetLeft;
	flyofwi = fly.offsetWidth;
	flyofto = fly.offsetTop;
	fly2b();
}

function fly2b() {
	if(num4 != message.length) {
		if(message.charAt(num4) != "$") {
			var then = document.getElementById("n" + num4);
			then.style.left = flyofle - then.offsetLeft + flyofwi / 2;
			then.style.top = flyofto - then.offsetTop + distance;
			fly3(then.id, parseInt(then.style.left), parseInt(then.style.left) / 5, parseInt(then.style.top), parseInt(then.style.top) / 5);
		}
		num4++;
		setTimeout("fly2b()", speed);
	}
}

function fly3(target,lef2,num2,top2,num3) {
	if((Math.floor(top2) != 0 && Math.floor(top2) != -1) || (Math.floor(lef2) != 0 && Math.floor(lef2) != -1)) {
		if(lef2 >= 0)
			lef2 -= num2;
		else
			lef2 += num2 * -1;
		if(Math.floor(lef2) != -1) {
			document.getElementById(target).style.visibility = "visible";
			document.getElementById(target).style.left = Math.floor(lef2);
		} else {
			document.getElementById(target).style.visibility = "visible";
			document.getElementById(target).style.left = Math.floor(lef2 + 1);
		}
		if(lef2 >= 0)
			top2 -= num3
		else
			top2 += num3 * -1;
		if(Math.floor(top2) != -1)
			document.getElementById(target).style.top = Math.floor(top2);
		else
			document.getElementById(target).style.top = Math.floor(top2 + 1);
		setTimeout("fly3('"+target+"',"+lef2+","+num2+","+top2+","+num3+")",50)
	}
}
stfly()
</script>
<script type="text/javascript"
              src="prototype.js"></script>
      <script type="text/javascript" xml:space="preserve">
     
      /*
           * Function that uses Prototype to invoke an action of a form. Slurps the values
           * from the form using prototype's 'Form.serialize()' method, and then submits
           * them to the server using prototype's 'Ajax.Updater' which transmits the request
           * and then renders the resposne text into the named container.
           *
           * @param form reference to the form object being submitted
           * @param event the name of the event to be triggered, or null
           * @param container the name of the HTML container to insert the result into
           */
           
          function invokeCollaboration(form, event, container) {
              var params = Form.serialize(form);
              if (event != null) params = event + '&' + params;
              new Ajax.Updater(container, form.action, {method:'post',postBody:params,onSuccess: showColTable});
                        
          }
          function showColTable(req){
           if (req.responseText == "Name field cannot be empty") {
              document.getElementById('nameError').style.display="block";
            }        
			else if (req.responseText == "Edit Collaboration") {
				setTable('addCol');
			}
			else {
				setTable('addCol');
			}
		  }

 		  function invokeOrganization(form, event, container) {
              var params = Form.serialize(form);
              if (event != null) params = event + '&' + params;
              new Ajax.Updater(container, form.action, {method:'post',postBody:params,onSuccess: showOrgTable});
                        
          }
          function showOrgTable(req){
           if (req.responseText == "Name field cannot be empty") {
              document.getElementById('nameError').style.display="block";
            }        
			else if (req.responseText == "Edit Organization") {
				setTable('addOrg');
			}
			else {
				setTable('addOrg');
			}
		  }
		  
		  function invokeResearcher(form, event, container) {
              var params = Form.serialize(form);
              if (event != null) params = event + '&' + params;
              new Ajax.Updater(container, form.action, {method:'post',postBody:params,onSuccess: showResTable});
                        
          }
          function showResTable(req){
            if (req.responseText == "Name field cannot be empty") {
              document.getElementById('nameError').style.display="block";
            }        
			else if (req.responseText == "Add Researcher") {
				setTable('addRes');
			}
			else {
				setTable('editTableR');
				
			}
		  }
		  
		  function ajaxSaveResearcher(form, event, container) {
              var params = Form.serialize(form);
              if (event != null) params = event + '&' + params;
              new Ajax.Updater(container, form.action, {method:'post',postBody:params, onSuccess: showSuccess});
          }    
          function ajaxSaveOrganization(form, event, container) {
              var params = Form.serialize(form);
              if (event != null) params = event + '&' + params;
              new Ajax.Updater(container, form.action, {method:'post',postBody:params, onSuccess: showSuccess});
          }    
          function ajaxSaveCollaboration(form, event, container) {
              var params = Form.serialize(form);
              if (event != null) params = event + '&' + params;
              new Ajax.Updater(container, form.action, {method:'post',postBody:params, onSuccess: showSuccess});
          }    
          function ajaxEditResearcher(form, event, container) {
           var params = Form.serialize(form);
              if (event != null) params = event + '&' + params;
              new Ajax.Updater(container, form.action, {method:'post',postBody:params, onSuccess: showSuccess});
          } 
          
          function showSuccess(req) {
          if (req.responseText == "") {
          		 document.getElementById('errorTable').style.display="none";
				 document.getElementById('addRes').style.display="none";
				 document.getElementById('addOrg').style.display="none";
				 document.getElementById('addCol').style.display="none";
				 document.getElementById('messageTable').style.display="none";
				 document.getElementById('addMRes').style.display="none";
				 document.getElementById('addMOrg').style.display="none";
			     document.getElementById('addMCol').style.display="none";
				 document.getElementById('messageTableO').style.display="none";
				 document.getElementById('nameError').style.display="none";
				 document.getElementById('editRes').style.display="none";
				 document.getElementById('editMRes').style.display="none";
				 document.getElementById('successful').style.display="block";
				 
		    }
		  else {
		  	document.getElementById('errorTable').style.display="block";
		  	}
		  }
		  
		  
		  var idss=new Array('addOrg','addRes','addCol','colName','orgName','resName','errorTable','successful','messageTableO','messageTable','nameError','editTableR','addMRes','addMOrg','addMCol');
		  function cancel() {
  			for (var i=0;i<idss.length;i++){
			  document.getElementById(idss[i]).style.display="none";
			  clearForm(idss[i]);
  		    }
		  }
			
	  
      </script>     
<script>
function clearForms()
{
  var i;
  for (i = 0; (i < document.forms.length); i++) {
    document.forms[i].reset();
  }
}
</script>


<table align="left" id="addMRes" style="display:none;">
  		<tr>
     		<td align="center" bgcolor="red" width="400px"><strong>Add Researcher</strong></td>
   	    </tr>   		    
  </table>
 <table align="left" id="addMOrg" style="display:none;">
  		<tr>
     		<td align="center" bgcolor="red" width="400px"><strong>Add Organization</strong></td>
   	    </tr>	
   	     <tr>
      		<td>
  				<font color="red">
  				NOTE: The </font> <font color="blue"> blue </font>
 			 	<font color="red">fields accept more than one value. 
 			 	But ONLY if the values are separated by a comma. 
 			 	i.e. 2001,2002, etc.
  			</td>	
      	</tr>   
  </table>
 <table align="left" id="addMCol" style="display:none;">
  		<tr>
     		<td align="center" bgcolor="red" width="400px"><strong>Add Collaboration</strong></td>
   	    </tr>	    
   	     <tr>
      		<td>
  				<font color="red">
  				NOTE: The </font> <font color="blue"> blue </font>
 			 	<font color="red">fields accept more than one value. 
 			 	But ONLY if the values are separated by a comma. 
 			 	i.e. 2001,2002, etc.
  			</td>	
      	</tr>
  </table>
<p>
<stripes:form action="/MyIsern.action">
	<table align="left" id="messageTable" style="display:none;">
      	<tr>
     	    <td id="result" bgcolor="red" align="center"></td>
   	    </tr>	    
   	    <tr>
   	    	<td>
   	    		&nbsp;
   	    	</td>
   	    </tr>
   	    <tr>
      		<td>
  				<font color="red">
  				NOTE: The </font> <font color="blue"> blue </font>
 			 	<font color="red">fields accept more than one value. 
 			 	But ONLY if the values are separated by a comma. 
 			 	i.e. 2001,2002, etc.
  			</td>	
      	</tr>
 </table>
</stripes:form>
<p>
<stripes:form action="/MyIsern.action">
	<table align="left" id="messageTableO" style="display:none;">
      	<tr>
     	    <td id="resultO" bgcolor="red" align="center"></td>
   	    </tr>	    
   	    <tr>
   	    	<td>
   	    		&nbsp;
   	    	</td>
   	    </tr>
   	    <tr>
      		<td>
  				<font color="red">
  				NOTE: The </font> <font color="blue"> blue </font>
 			 	<font color="red">fields accept more than one value. 
 			 	But ONLY if the values are separated by a comma. 
 			 	i.e. 2001,2002, etc.
  			</td>	
      	</tr>
 </table>
</stripes:form>

<div id="allignEdit">
<p>
<stripes:form action="/MyIsern.action">
	<table align="left" id="editTableR" style="display:none;">
      <tr>
     	    <td id="resultR" align="center" width="400px"></td>
   	    </tr>	    
   	    <tr>
   	    	<td>
   	    		&nbsp;
   	    	</td>
   	    </tr>
 </table>
</stripes:form>
</div>
<p>
<div id="errortop">
<stripes:form action="/MyIsern.action">
	<table align="left" id="errorTable" style="display:none;">
      <tr>
  	    <td id="error" align="center" width="400px"></td>
   	 </tr>	    
 </table>
</stripes:form>
</div>
<p>
<stripes:form action="/MyIsern.action">
	<table align="left" id="successful" style="display:none;">
      <tr>
     	    <td align="center" width="400px">Operation was Successful!</td>
   	 </tr>	      	    
 </table>
</stripes:form>

<p>
<stripes:form action="/MyIsern.action">
	<table align="left" id="nameError" style="display:none;">
      <tr>
     	    <td align="center" width="400px"  bgcolor="red">Name field cannot be empty</td>
   	    </tr>	 
   	     <tr>
   	    	<td>
   	    		&nbsp;
   	    	</td>
   	    </tr>   
 </table>
</stripes:form>

<p>
<div id="allignColForm">
<stripes:form id="addCollaborationForm" action="/MyIsern.action">
   <table align="left" id="addCol" style="display:none;" border="0" cellpadding="0" cellspacing="0">   
      	<tr>
    	    <td>
    	   		Name:
    	    </td>
    	    <td>
				<stripes:text name="collaborationName" />
			</td>
			</tr>
			<tr>
      		<td>
      			<font color="blue">
      			Collaborating-Organizations:</font>
  	        </td>
  	        <td>
  	        	<stripes:text name="collaboratingOrganizations" />
  	        </td>
      	</tr>
      	<tr>
      		<td>
      			<font color="blue">
      			Collaboration-Types:</font>
  	        </td>
  	        <td>
  	        	<stripes:text name="collaborationTypes" />
  	        </td>
  	        </tr>
  	        <tr>
      		<td>
      			<font color="blue">
      				Year:</font>
  	        </td>
  	        <td>
  	        	<stripes:text name="year" id="formCol"/>
      	</tr>
  		<tr>
  		<td>
  			<font color="blue">
  			Outcome-Types:</font>
  	   	</td>
  	   	<td>
  	   		<stripes:text name="outcomeTypes" />
  	   	</td>
  	   	</tr>
  	   	<tr>
     	<td>
    		Description:
        </td>
        <td>
        	<stripes:text name="description" />
        </td>
      	</tr>
      	<tr>
   			<td>
      			&nbsp;
      		</td>
      		<td>
      			&nbsp;
      		</td>
      	</tr>
      	<tr>
      		<td>
      			
      		</td>
      		<td>	
      			<stripes:button name="saveCollaboration" value=" Save "
    	            onclick="ajaxSaveResearcher(this.form, this.name, 'error');"/>&nbsp;&nbsp;&nbsp;&nbsp;
    	        <input type="button" value="Cancel" onclick="cancel();return false"></input>
      		</td>
      	</tr>
   </table>
  </stripes:form>


<p>
  <stripes:form id="addOrganizationForm" action="/MyIsern.action">
   <table align="left" id="addOrg" style="display:none;" border="0" cellpadding="0" cellspacing="0" >   
      	<tr>
      		<td>
      	    	Name:
      		</td>
      		<td>
      			<stripes:text name="organizationName" />
      		</td>
      	</tr>
      	<tr>
      		<td>
      			Type:
      		</td>
          	<td>
       	    	<stripes:text name="organizationType" />
  	        </td>
      	</tr>
      	<tr>
      		<td>
      			Contact:
      		</td>
          	<td>
       	    	<stripes:text name="contact" />
  	        </td>
      	</tr>
      	<tr>
      		<td>
      			<font color="blue">
      				Affiliated-Researcher:
      			</font>
      		</td>
          	<td>
       	    	<stripes:text name="affiliatedResearcher" />
  	        </td>
      	</tr>
      		<tr>
      		<td>
    			Country:
       		</td>
          	<td>
       	    	<stripes:text name="country" />
  	        </td>
      	</tr>
      	<tr>
      		<td>
      			<font color="blue">
      				Research-Keywords:
      			</font>
      		</td>
          	<td>
       	    	<stripes:text name="researchKeywords" />
  	        </td>
      	</tr>
      	<tr>
      		<td>
      			Research-Description:
      		</td>
          	<td>
       	    	<stripes:text name="researchDescription" />
  	        </td>
      	</tr>
      	<tr>
      		<td>
      			Home-Page:
      		</td>
          	<td>
       	    	<stripes:text name="homePage" />
  	        </td>
      	</tr>
      	<tr>
   			<td>
      			&nbsp;
      		</td>
      		<td>
      			&nbsp;
      		</td>
      	</tr>
      	<tr>
      		<td>
      			
      		</td>
      		<td>
      			<stripes:button name="saveOrganization" value=" Save "
    	            onclick="ajaxSaveOrganization(this.form, this.name, 'error');"/>&nbsp;&nbsp;&nbsp;&nbsp;
    	        <input type="button" value="Cancel" onclick="cancel();return false"></input>
      		</td>
      	</tr>
   </table>
  </stripes:form>
</div>
<div id="allignEdit">
<p>
<stripes:form id="addResearcherForm" action="/MyIsern.action">
   <table align="left" id="addRes" style="display:none;" border="0" cellpadding="0" cellspacing="0" >   
   	<tr>
   		<td>
   		&nbsp;
   		</td>
   	</tr>
      	<tr>
      		<td> 
      	    	Name:
      		</td>
      		<td>
      			<stripes:text name="researcherName" />
      		</td>
      	</tr>
      		<td>
      			Organization:
       		</td>
          	<td>
       	    	<stripes:text name="researcherOrganization" />
  	        </td>
      	</tr>
      	<tr>
      		<td>
      			Email:
      		</td>
          	<td>
       	    	<stripes:text name="email" />
  	        </td>
      	</tr>
      	<tr>
      		<td>
      			Picture-Link:
      		</td>
          	<td>
       	    	<stripes:text name="pictureLink" />
  	        </td>
      	</tr>
      		<tr>
      		<td>
      			Bio-Statement:
      		</td>
          	<td>
       	    	<stripes:text name="bioStatement" />
  	        </td>
      	</tr>
      	<tr>
   			<td>
      			&nbsp;
      		</td>
      		<td>
      			&nbsp;
      		</td>
      	</tr>
      	<tr>
      		<td>
      			&nbsp;
      		</td>
      		<td>
      			 <stripes:button name="saveResearcher" value=" Save "
    	            onclick="ajaxSaveResearcher(this.form, this.name, 'error');"/>&nbsp;&nbsp;&nbsp;&nbsp;
    	        <input type="button" value="Cancel" onclick="cancel();return false"></input>
    	            
      		</td>
      	</tr>
   </table>
  </stripes:form>

</div>
<p>
<div id="findName">
<stripes:form action="/MyIsern.action">
	<table align="left" id="colName" style="display:none;">
    	<tr>
        	<td>Name:</td>
           	<td><stripes:text name="findId"/>
           	</td>
           	</tr>
           	<tr>
           	<td>
           		&nbsp;
           	</td>
   	        <td>
   		        <stripes:button name="findCollaboration" value="Find" style="width:60px"
   		        onclick="invokeCollaboration(this.form, this.name, 'result');"/>&nbsp;&nbsp;&nbsp;
   		         <input type="button" value="Cancel" onclick="cancel();return false"></input>
  	        </td> 
  	    </tr>
    </table>
</stripes:form>
<p>
<stripes:form action="/MyIsern.action">
	<table align="left" id="orgName" style="display:none;">
    	<tr>
        	<td>Name:</td>
           	<td><stripes:text name="findId"/>
           	</td>
           	</tr>
           	<tr>
           	<td>
           		&nbsp;
           	</td>          	
   	        <td>
   		        <stripes:button name="findOrganization" value="Find" style="width:60px"
    	            onclick="invokeOrganization(this.form, this.name, 'resultO');"/>&nbsp;&nbsp;&nbsp;
    	        <input type="button" value="Cancel" onclick="cancel();return false"></input>
  	        </td> 
  	    </tr>
    </table>
</stripes:form>
<p>

<stripes:form action="/MyIsern.action">
	<table align="left" id="resName" style="display:none;">
    	<tr>
        	<td>Name:</td>
           	<td><stripes:text name="findId"/>
           	</td>
           	</tr>
           	<tr>
           	<td>
           		&nbsp;
           	</td>		
   	        <td>
   		        <stripes:button name="findResearcher" value=" Find " style="width:60px"
    	            onclick="invokeResearcher(this.form, this.name, 'resultR');"/>&nbsp;&nbsp;&nbsp;
    	        <input type="button" value="Cancel"  onclick="cancel();return false"></input>
  	        </td> 
  	    </tr>
    </table>
  </div>
</stripes:form>
</div>
</body>
</html>